<template>
	<view class="show-add" v-if="showAdd" @click.prevent.stop @touchmove.stop.prevent="stopScrolling" @click="closeAddCode(false)">
		<view class="show-add-context" @click.prevent.stop>
			<image class="show-add-context-image" :src="headerIcon" />

			<view class="show-add-context-name">邀请码</view>
			<input
				confirm-type="done"
				class="show-add-context-input"
				:focus="true"
				v-model="inviteCode"
				type="text"
				placeholder="请输入邀请码"
				placeholder-class="input-placeholder"
				@confirm="codeSubmit"
				:cursor-spacing="160"
			/>
			<button class="show-add-context-submit" @click="codeSubmit">确定</button>
			<view class="show-add-context-close">
				<image @click.prevent.stop="closeAddCode(false)" src="@/static/icon/icon_service_close.png" class="image" />
			</view>
		</view>
	</view>
</template>

<script>
import { useCode } from '@/api/my';
import { defaultImageUrl } from '@/utils';
import { InvitationCodeMistakeHintList } from '@/utils/common';

const headerIcon = Object.freeze(`${defaultImageUrl}image/img_tc_invite.png`);

export default {
	name: 'InviteCode',
	props: {
		showAdd: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			headerIcon,
			inviteCode: undefined
		};
	},
	methods: {
		// 阻止遮罩滚动穿透
		stopScrolling() {},
		//提交邀请码
		codeSubmit() {
			const { inviteCode } = this;
			if (!inviteCode || inviteCode.length < 1) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '无效邀请码！'
				});
				return;
			}
			const params = { code: inviteCode };
			useCode(params).then((res) => {
				const resData = res.data;

				if ([0, 1].includes(resData.codeUseStatus)) {
					this.closeAddCode(true, resData);
					return;
				}

				const { hint } = InvitationCodeMistakeHintList.find((item) => item.type === resData.codeUseStatus);

				uni.showToast({
					icon: 'none',
					title: hint
				});
			});
		},
		//关闭弹窗
		closeAddCode(useSuccess, res) {
			this.inviteCode = '';
			this.$emit('closeInviteCode', useSuccess, res);
			uni.hideKeyboard();
		}
	}
};
</script>

<style lang="scss" scoped>
.show-add {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999999;
	background: rgba(0, 0, 0, 0.6);
	text-align: center;

	&-context {
		position: fixed;
		top: 50%;
		left: 74rpx;
		transform: translateY(-60%);
		width: 602rpx;
		height: 448rpx;
		background: linear-gradient(180deg, #fff5dd 0%, #ffffff 100%);
		border-radius: 24rpx;
		&-image {
			width: 382rpx;
			height: 200rpx;
			margin-top: -92rpx;
		}
		&-name {
			font-size: 36rpx;
			font-weight: 600;
			color: #4a2500;
			line-height: 50rpx;
		}
		&-input {
			width: 542rpx;
			height: 100rpx;
			background: #fce9d2;
			border-radius: 24rpx;
			margin: 40rpx auto 0;
			text-align: left;
			padding: 0 40rpx;
			/deep/ .input-placeholder {
				font-size: 28rpx;
				font-weight: 400;
				color: #a58a6b;
				//margin-left: 40rpx;
			}
		}
		&-submit {
			margin-top: 40rpx;
			width: 542rpx;
			height: 80rpx;
			background: #ff6b11;
			border-radius: 24rpx;
			color: #ffffff;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 80rpx;
			&:after {
				border: none;
			}
		}

		&-close {
			text-align: center;
			margin-top: 84rpx;

			.image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>
